<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="24" :xs="24">
				<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
					label-width="68px">
					<el-form-item label="设备" prop="device">
						<el-select v-model="queryParams.type" placeholder="设备类型" clearable style="width: 140px">
							<el-option v-for="item in types" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="周期">
						<el-select v-model="cycle.value" placeholder="请选择" style="width: 140px">
							<el-option v-for="item in cycle.options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="开始年份" v-if="cycle.value==='year'">
						<el-input-number v-model="year.start.value" :min="year.start.min" :max="year.start.max"
							@change="handleChange" />
					</el-form-item>
					<el-form-item label="结束年份" v-if="cycle.value==='year'">
						<el-input-number v-model="year.end.value" :min="year.end.min" :max="year.end.max"
							@change="handleChange" />
					</el-form-item>

					<el-form-item label="年" v-if="cycle.value==='month'">
						<el-input-number v-model="month.year.value" :min="month.year.min" :max="month.year.max"
							@change="handleChange" />
					</el-form-item>
					<el-form-item label="开始月份" v-if="cycle.value==='month'">
						<el-select v-model="month.start" placeholder="请选择" style="width: 140px">
							<el-option v-for="option in month.options" :key="option.value" :label="option.label"
								:value="option.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="结束月份" v-if="cycle.value==='month'">
						<el-select v-model="month.end" placeholder="请选择" style="width: 140px">
							<el-option v-for="option in month.options" :key="option.value" :label="option.label"
								:value="option.value" />
						</el-select>
					</el-form-item>

					<el-form-item label="开始日期" v-if="cycle.value==='day'">
						<el-date-picker v-model="day.start" value-format="yyyy-MM-dd" type="date" />
					</el-form-item>
					<el-form-item label="结束日期" v-if="cycle.value==='day'">
						<el-date-picker v-model="day.end" value-format="yyyy-MM-dd" type="date" />
					</el-form-item>

					<el-form-item label="日期" v-if="cycle.value==='hour'">
						<el-date-picker v-model="hour.date" value-format="yyyy-MM-dd" type="date" />
					</el-form-item>

					<el-form-item label="开始时间" v-if="cycle.value==='hour'">
						<el-select v-model="hour.start" placeholder="请选择" style="width: 140px">
							<el-option v-for="option in hour.options" :key="option.value" :label="option.label"
								:value="option.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="结束时间" v-if="cycle.value==='hour'">
						<el-select v-model="hour.end" placeholder="请选择" style="width: 140px">
							<el-option v-for="option in hour.options" :key="option.value" :label="option.label"
								:value="option.value" />
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>


				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<!-- <el-button type="successs" plain size="mini" :disabled="multiple"
							@click="handleType">{{typeName}}</el-button> -->
						<el-select v-model="chartType" placeholder="请选择" style="width: 140px">
							<el-option v-for="item in chartOptions" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
						<!-- v-hasPermi="['system:user:remove']" -->
					</el-col>
					<el-col :span="1.5">
						<el-button type="warning" plain icon="el-icon-download" size="mini"
							@click="handleExport">导出</el-button>
						<!-- v-hasPermi="['system:user:export']" -->
					</el-col>
					<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
				</el-row>

				<el-row :gutter="32">
					<el-col :xs="24" :sm="24" :lg="24" v-if="chartType === 'line'">
						<div class="chart-wrapper">
							<line-chart :chart-data="lineChartData" height="400px" />
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :lg="24" v-if="chartType === 'bar'">
						<div class="chart-wrapper">
							<bar-chart :chart-data="barChartData" height="400px" />
						</div>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import LineChart from '../dashboard/LineChart'
	import RaddarChart from '../dashboard/RaddarChart'
	import PieChart from '../dashboard/PieChart'
	import BarChart from '../dashboard/BarChart'
	import {
		getToken
	} from "@/utils/auth";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";

	// 引入JOSN结构
	import {
		types
	} from '@/structure/common.js';
	import {
		chartOptions,
		cycle,
		year,
		month,
		day,
		hour,
		lineChartData,
		barChartData
	} from '@/structure/energyData.js';

	export default {
		name: "User",
		components: {
			LineChart,
			RaddarChart,
			PieChart,
			BarChart
		},
		data() {
			return {
				// 显示搜索条件
				showSearch: true,
				// 查询参数
				queryParams: {
					type: "charger",
				},
				types: types,
				chartType: "line",
				chartOptions: chartOptions,
				//周期,年月日小时
				cycle: cycle,
				year: year,
				month: month,
				day: day,
				hour: hour,
				lineChartData: lineChartData,
				barChartData: barChartData,
			};
		},
		watch: {

		},
		created() {

		},
		methods: {
			getList() {

			},
			handleExport() {

			},
			handleChange() {

			},
		},
	};
</script>

<style lang="scss" scoped>
	.chart-wrapper {
		background: #fff;
		padding: 16px 16px 0;
		margin-bottom: 32px;
	}

	@media (max-width:1024px) {
		.chart-wrapper {
			padding: 8px;
		}
	}
</style>